<template>
    <div class="shopList">
        <div class="shopItem" v-for="item in photoList" :key="item.id" @click="goDetail(item.id)">
           <img :src=" item.img_url" alt="Apple 苹果 iPhone6s Plus 手机 金色 全网通128G">
           <h1 class="shopTitle">{{ item.title }} </h1>
           <div class="shopInfo">
               <div class="price">
                   <span class="newPrice">￥{{ item.sell_price }}</span>
                   <span class="oldPrice">￥{{ item.market_price }}</span>
               </div>
               <div class="sell">
                   <span>热卖中</span>
                   <span>剩{{ item.stock_quantity }}件</span>
               </div>
           </div>
        </div>
        <!-- 加载更多 -->
        <mt-button type="danger" size="large" @click="getMore">加载更多商品</mt-button>

    </div>
</template>
<script>
export default {
     data(){
         return {
           pageindex: 1,
           photoList: [],
         }
     },
     created(){
        //  页面加载自动获取手机列表
          this.getPhotoList()
     },
     methods:{
         getPhotoList(){
             this.$http.get("api/getgoods?pageindex=" + this.pageindex).then(result=>{
                //  console.log(result);
                if(result.body.status === 0){
                    this.photoList=this.photoList.concat(result.body.message);
                }
             });
         },
        //  点击加载更多
        getMore(){
            this.pageindex++;
            this.getPhotoList()
        },
        goDetail(id){
          this.$router.push('/home/goodsInfo/'+id); 
        // this.$router.push({name:'goodInfo', parmas: {id}})
        }
     }
}
</script>
<style lang="scss" scoped>
    .shopList {
        margin-bottom: 100px;
        display: flex;
        flex-wrap: wrap;
        padding: 5px;
        justify-content:space-between;
        .mt-button::before {
          margin-top: -10px;
        }
        .shopItem {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 293px;
            .price,
            .sell {
                display: flex;
                justify-content: space-between;
                .oldPrice { 
                    text-decoration:line-through;
                    color: #ccc;
                }
            }
            .price {
                padding: 0 70px 0 16px;
                .newPrice {
                    font-size: 15px;
                    color: red;
                    font-weight: 700;
                }
                .oldPrice {
                    font-size: 15px;
                }
            }
            .sell {
                 padding: 0 6px;
                 font-size: 14px;
                    color: #ccc;
            }
            margin-bottom: 5px;
            width: 49%;
            border: 1px solid skyblue;
            box-shadow: 0 0 8px skyblue;
            img {
                width: 100%;
            }
            h1 {
                font-size: 14px;
                font-weight: normal;
                color: skyblue;
                text-align: center;
            }
        }
    }    
</style>
